<template>
  <el-card>
    <el-form
      ref="ruleFormRef"
      style="max-width: 300px"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-form-item label="登录名" prop="loginUserName">
        <el-input v-model="ruleForm.loginUserName" />
      </el-form-item>
      <el-form-item label="昵称" prop="nickName">
        <el-input v-model="ruleForm.nickName" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          确认修改
        </el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <el-card>
    <el-form
      ref="ruleFormRef1"
      style="max-width: 300px"
      :model="ruleForm1"
      :rules="rules1"
      label-width="auto"
      class="demo-ruleForm"
      :size="formSize1"
      status-icon
    >
      <el-form-item label="原密码" prop="originalPassword">
        <el-input v-model="ruleForm1.originalPassword" />
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input v-model="ruleForm1.newPassword" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm1(ruleFormRef1)">
          确认修改
        </el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage, type FormInstance, type FormRules } from "element-plus";
import { api } from "../../../api/api";
interface RuleForm {
  loginUserName: string;
  nickName: string;
}
const formSize = ref("default");
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  loginUserName: "admin",
  nickName: "十三",
});

const rules = reactive<FormRules<RuleForm>>({
  loginUserName: [{ required: true, message: "请输入登录名", trigger: "blur" }],
  nickName: [{ required: true, message: "请输入昵称", trigger: "blur" }],
});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      api.editAdminUserApi(ruleForm).then((res:any) => {
        if (res.resultCode !== 200) ElMessage.error(res.message);
        else ElMessage.success("成功");
      });
    } else {
      console.log("error submit!", fields);
    }
  });
};








interface RuleForm1 {
  originalPassword: string;
  newPassword: string;
}
const formSize1 = ref("default");
const ruleFormRef1 = ref<FormInstance>();
const ruleForm1 = reactive<RuleForm1>({
  originalPassword: "",
  newPassword: "",
});

const rules1 = reactive<FormRules<RuleForm1>>({
  originalPassword: [{ required: true, message: "请输入原密码", trigger: "blur" }],
  newPassword: [{ required: true, message: "请输入新密码", trigger: "blur" }],
});

const submitForm1 = async (formEl1: FormInstance | undefined) => {
  if (!formEl1) return;
  await formEl1.validate((valid, fields) => {
    if (valid) {
      api.editAdminUserPasswordApi(ruleForm1).then((res:any) => {
        if (res.resultCode !== 200) ElMessage.error(res.message);
        else ElMessage.success("成功");
      });
    } else {
      console.log("error submit!", fields);
    }
  });
};
</script>

<style lang="scss" scoped>
.el-card {
  margin-bottom: 20px;
}
</style>
